import React, { Component } from 'react'
import { request } from '../../api'
import "./index.scss"
import { roleList } from "../../utils";
import { reg } from "../../utils/validate"
import { observer } from "mobx-react"
import mobxdata from "../../mobx/data"
import { Table, Button, Tag, Form, Input, Row, Col, Select, Modal,Popconfirm } from "antd"

const { Option } = Select;
const { phone } = reg;
@observer
class UserIndex extends Component {
    componentDidMount() {
        request.getuserlist()
            .then(res => {
                if (res.code == 200) {
                    this.setState({
                        list: res.result
                    })
                }
            })
    }
    state = {
        list: [],
        columns: [
            {
                align: "center",
                title: "用户姓名",
                key: "username",
                dataIndex: "username"
            },
            {
                align: "center",
                title: "手机号码",
                key: "phone",
                dataIndex: "phone",
                render: (text, item) => {

                    return text
                }
            },
            {
                align: "center",
                title: "登录密码",
                key: "password",
                dataIndex: "password"
            },
            {
                align: "center",
                title: "用户权限",
                key: "role",
                dataIndex: "role",
                render: (text, a) => {

                    return (
                        <Tag style={{ margin: "0 5px" }} color={roleList.find(item => item.role == text).color}> {roleList.find(item => item.role == text).title}  </Tag>
                    )
                }

            },
            {
                align: "center",
                title: "操作",

                render: (text, item) => {
                    const { userinfo } = mobxdata
                    
                    return (
                        (userinfo.role>item.role || item.phone==userinfo.phone)
                       ?<p>
                            <Popconfirm
                                title="你是否要删除"
                                onConfirm={()=>this.confirm(item)}
                                onCancel={this.cancel}
                                okText="删除"
                                cancelText="取消"
                            >
                                <Button type="danger" style={{ marginRight: 6 }} size="small">删除</Button>
                            </Popconfirm>

                            <Button type="danger" onClick={()=>this.updateItem(item)} style={{ marginRight: 6 }} size="small">修改</Button>
                        </p>
                        :<p>暂无权限</p>
                    )
                }
            },

        ],
        isModalVisible: false,
        updateVisible: false,
        item:[]
    }
    confirm = (item) => {
      
        request.deluserone({
            _id: item._id
        })
            .then(res => {
                if (res.code == 200) {
                    var list = this.state.list.filter(l => l._id != item._id)
                    this.setState({
                        list
                    })
                }
            })
    }
    startSearchData = (value) => {
        console.log(value)
        request.getuserlist(value)
            .then(res => {
                if (res.code == 200) {
                    this.setState({
                        list: res.result
                    })
                }
            })
    }
    resetSearchForm = () => {
        this.searchFrom.resetFields()
    }
    handleOk = () => {
        // console.log(this.addFrom);
        this.addFrom.validateFields()
            .then(value => {
                request.addusers(value)
                    .then(res => {
                        if (res.code == 200) {
                            request.getuserlist()
                                .then(res => {
                                    if (res.code == 200) {
                                        this.addFrom.resetFields()
                                        this.setState({
                                            list: res.result,
                                            isModalVisible: false
                                        })
                                    }
                                })
                        }
                    })
            })
    }
    handleCancel = () => {
        this.addFrom.resetFields()
        this.setState({
            isModalVisible: false
        })
    }
    showAddModal = () => {

        this.setState({
            isModalVisible: true
        })
    }
    updateItem=(item)=>{
        console.log(item);
        this.setState({
            updateVisible: true,
            item
        })
        setTimeout(()=>{
            this.updateFrom.setFieldsValue(item)
        },1)
    }
    updatehandleCancel = () => {
        this.setState({
            updateVisible: false
        })
    }
    updatehandleOk=()=>{
        this.updateFrom.validateFields()
        .then(value=>{
            console.log(value);
            request.updateuserone({
                _id:this.state.item._id,
                ...value
            }).then(res=>{
                if(res.code==200){

                    var list  = this.state.list.map((item)=>{
                        if(item._id == this.state.item._id){
                            item = {...item,...value}
                            console.log(item);    
                        }
                    
                        return item
                    })
                
                    this.setState({
                        updateVisible: false,
                        list
                    })
                }
            })
           
        }) 
    }
    render() {
        const { userinfo } = mobxdata
        return (
            <div>
                
                {/* <h2 style={{margin:"20px 0"}}>用户列表</h2> */}
                <Form
                    ref={el => this.searchFrom = el}
                    onFinish={this.startSearchData}
                >
                   
                    <Row>
                        <Col span={2} >
                        <Button type="danger" onClick={this.showAddModal }>添加用户</Button>
                        </Col>
                        <Col span={4} offset={1}  >
                            <Form.Item
                                label="用户姓名"
                                name="username"

                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={4} offset={1}>
                            <Form.Item
                                label="手机号码"
                                name="phone"

                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={4} offset={1}>
                            <Form.Item
                                label="用户角色"
                                name="role"

                            >
                                <Select
                                    placeholder="请选择"
                                    onChange={this.onGenderChange}
                                    allowClear
                                >
                                    {
                                        roleList.map((item, i) => {
                                            return (
                                                <Option value={item.role} key={i} > {item.title}</Option>
                                            )
                                        })
                                    }
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={4} offset={2}>
                            <Form.Item >
                                <Button type="primary" htmlType="submit" style={{ marginRight: 6 }}>搜索</Button>
                                <Button type="danger" onClick={this.resetSearchForm}>重置</Button>
                            </Form.Item>
                        </Col>
                    </Row>

                </Form>
                <Table dataSource={this.state.list}
                    sticky
                    bordered
                    columns={this.state.columns}
                    pagination={{ pageSize: 5 }}
                    rowKey={(item) => item._id}
                >

                </Table>
                <Modal 
                    title="修改用户信息" 
                    visible={this.state.updateVisible} 
                    onOk={this.updatehandleOk} 
                    onCancel={this.updatehandleCancel}
                    okText="确认修改"
                    cancelText="取消"
                    className="my-modal"
                    >
                    <Form 
                        ref={el=>this.updateFrom=el}
                        onFinish={this.addUserData}
                        initialValues={{
                            password:"qwe123"
                        }}
                        layout="vertical"
                    >
                        
                            <Col span={20} >
                                <Form.Item
                                    label="用户姓名"
                                    name="username"
                                    rules={[
                                        { required: true, message: '请输入用户姓名' },
                                    
                                    ]}
                                >
                                    <Input 
                                        
                                    />
                                </Form.Item>
                            </Col>
                            <Col span={20}>
                                <Form.Item
                                    label="手机号码"
                                    name="phone"
                                    rules={[{ required: true, message: '请输入手机号码' }, 
                                    {
                                        pattern:phone,message:'请输入正确格式的手机号码'
                                    }]}
                                >
                                    <Input />
                                </Form.Item>
                            </Col>
                            
                            <Col span={20} >
                                <Form.Item
                                    label="用户角色"
                                    name="role"
                                    rules={[{ required: true, message: '请选择' }]}
                                >   
                                    <Select
                                        placeholder="请选择"
                                        
                                        allowClear
                                        >
                                        {
                                            roleList.map((item,i)=>{
                                                return (
                                                    (userinfo.role>item.role)&&<Option value={item.role} key={i} > {item.title}</Option>
                                                )
                                            })
                                        }
                                    </Select>
                                </Form.Item>
                            </Col>
                    </Form>
                </Modal>
                <Modal
                    title="添加用户"
                    visible={this.state.isModalVisible}
                    onOk={this.handleOk}
                    okText="确定"
                    cancelText="取消"
                    onCancel={this.handleCancel}>
                    <Form
                        ref={el => this.addFrom = el}
                        onFinish={this.addUserData}
                        initialValues={{
                            password: "a123123"
                        }}
                        layout="vertical"
                    >

                        <Col span={20} >
                            <Form.Item
                                label="用户姓名"
                                name="username"
                                rules={[
                                    { required: true, message: '请输入用户姓名' },

                                ]}
                            >
                                <Input

                                />
                            </Form.Item>
                        </Col>
                        <Col span={20}>
                            <Form.Item
                                label="手机号码"
                                name="phone"
                                rules={[{ required: true, message: '请输入手机号码' },
                                {
                                    pattern: phone, message: '请输入正确格式的手机号码'
                                }]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={20}>
                            <Form.Item
                                label="登录密码"
                                name="password"
                                rules={[{ required: true, message: '请输入登录密码' }]}
                            >
                                <Input disabled />
                            </Form.Item>
                        </Col>
                        <Col span={20} >
                            <Form.Item
                                label="用户角色"
                                name="role"
                                rules={[{ required: true, message: '请选择' }]}
                            >
                                <Select
                                    placeholder="请选择"

                                    allowClear
                                >
                                    {
                                        roleList.map((item, i) => {
                                            return (
                                                (userinfo.role > item.role) && <Option value={item.role} key={i} > {item.title}</Option>
                                            )
                                        })
                                    }
                                </Select>
                            </Form.Item>
                        </Col>
                    </Form>
                </Modal>
            </div>
        )
    }
}

export default UserIndex